<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-tabs [(lvActiveIndex)]="activeIndex">
    <lv-tab lvTitle="{{'common_summary_label' | i18n}}" lvId="1">
        <lv-form [lvLabelColon]="false" class="formGroup">
            <h3 class="mgb-10">{{'common_basic_info_label' | i18n}}</h3>
            <lv-form-item>
                <lv-form-label>{{'common_name_label' | i18n}}</lv-form-label>
                <lv-form-control>
                    {{rowItem.name}}
                </lv-form-control>
            </lv-form-item>
            <lv-form-item>
                <lv-form-label>{{'protection_os_type_label' | i18n}}</lv-form-label>
                <lv-form-control>
                    {{ rowItem.osType | textMap: 'Fileset_Template_Os_Type' | nil}}
                </lv-form-control>
            </lv-form-item>
            <h3 class="mgb-10 mgt20">{{'common_file_path_label' | i18n}}</h3>
            <div class="table-path-container">
                <lv-datatable [lvData]="allPath" #lvTable [lvPaginator]='page' lvSize="small">
                    <thead>
                        <tr>
                            <th>{{'common_path_label'| i18n}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let item of lvTable.renderData">
                            <tr>
                                <td>{{item.path}}</td>
                            </tr>
                        </ng-container>
                    </tbody>
                </lv-datatable>
                <div class="aui-paginator-wrap">
                    <lv-paginator #page lvMode='simple' [lvTotal]="allPath?.length" [lvPageSizeOptions]="sizeOptions"
                        lvShowPageSizeOptions="false" [lvPageSize]="pageSize">
                    </lv-paginator>
                </div>
            </div>
            <ng-container *ngIf="filterExcludeArr.length > 0 || filterIncludeArr.length > 0">
                <h3 class="mgb-10">{{'protection_file_filter_rule_label' | i18n}}</h3>
                <lv-form-item *ngIf="filterExcludeArr.length > 0">
                    <lv-form-label>{{'common_exclude_label' | i18n}}</lv-form-label>
                    <lv-form-control>
                        <ng-container *ngTemplateOutlet='baseFilterTpl;context:{$implicit: filterExcludeArr}'>
                        </ng-container>
                    </lv-form-control>
                </lv-form-item>
                <lv-form-item *ngIf="filterIncludeArr.length > 0">
                    <lv-form-label>{{'common_include_label' | i18n}}</lv-form-label>
                    <lv-form-control>
                        <ng-container *ngTemplateOutlet='baseFilterTpl;context:{$implicit: filterIncludeArr}'>
                        </ng-container>
                    </lv-form-control>
                </lv-form-item>
            </ng-container>
        </lv-form>
    </lv-tab>
    <lv-tab lvTitle="{{'protection_associating_filesets_label' | i18n}}" lvId="2">
        <aui-associated-fileset [rowItem]="rowItem"></aui-associated-fileset>
    </lv-tab>
</lv-tabs>

<ng-template #baseFilterTpl let-arr>
    <ng-container *ngIf="!!arr.length;else emptyTpl">
        <lv-form [lvLabelColon]="false" class="formGroup">
            <ng-container *ngFor="let item of arr">
                <ng-container *ngFor="let val of item?.content">
                    <lv-form-item>
                        <lv-form-label>
                            <span class="filter-header-color">{{item?.label}}</span>
                        </lv-form-label>
                        <lv-form-control>
                            <div class="filter-break">
                                {{val}}
                            </div>
                        </lv-form-control>
                    </lv-form-item>
                </ng-container>
            </ng-container>
        </lv-form>
    </ng-container>
    <ng-template #emptyTpl>
        --
    </ng-template>
</ng-template>